<template>
  <view class="container">
    <view class="tabs-header">
      <up-tabs
        class="up-tabs-content"
        :list="tabsData"
        @click="onTabClick"
        :lineWidth="lineWidth"
        lineColor="#2877FF"
        :activeStyle="activeTabStyle"
        :inactiveStyle="inactiveTabStyle"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
      />
    </view>

    <view class="form-content">
      <u-form :model="formData" ref="uForm">
        <template v-if="userType === '3'">
          <!-- 道路运输证表单 -->
          <u-form-item label="车牌号码" label-width="120">
            <u-input
              v-model="formData.carNumber"
              placeholder="请输入车牌号码"
              class="custom-input"
              border="none"
            />
          </u-form-item>
          <u-form-item label="车牌颜色" class="form-item" label-width="120">
            <view class="arrow-icon-groud">
              <u-input
                class="custom-input"
                v-model="formData.plateColor"
                placeholder="请选择车牌颜色"
                @click="changeOpenCarColor"
                border="none"
              />
              <!-- 向下/向上箭头图标 -->
              <u-icon
                :name="plateColorPickerVisible ? 'arrow-up' : 'arrow-down'"
                size="20"
                class="arrow-icon"
              />
            </view>

            <area-picker
              ref="carPicker"
              :title="title"
              titleColor="#808080"
              titleFontSize="14px"
              cancelType="icon"
              cancelColor="#999999"
              cancleFontSize="28rpx"
              confirmColor="#2877FF"
              confirmFontSize="14px"
              confirmFontWeight="500"
              itemFontSize="14px"
              @onClose="closeCarPicker"
              @onConfirm="confirmCarPicker"
              :pickerList="list"
            />
          </u-form-item>
          <u-form-item label="证件类型" class="form-item" label-width="120">
            <view class="arrow-icon-groud">
              <u-input
                class="custom-input"
                v-model="formData.certType"
                placeholder="请选择证件类型"
                @click="openCertTypePicker"
                border="none"
              />
              <u-icon
                :name="certTypePickerVisible ? 'arrow-up' : 'arrow-down'"
                size="20"
                class="arrow-icon"
              />
            </view>
          </u-form-item>
          <u-form-item label="统一社会信用代码" label-width="120">
            <u-input
              v-model="formData.carNumber"
              placeholder="请输入统一社会信用代码"
              class="custom-input"
              border="none"
            />
          </u-form-item>
        </template>
        <template v-else>
          <!-- 原有的表单内容 -->
          <u-form-item
            label="业户名称"
            v-if="userType !== '1'"
            label-width="120px"
          >
            <u-input
              v-model="formData.companyName"
              placeholder="请输入业户名称"
              border="none"
            />
          </u-form-item>
          <u-form-item
            :label="userType === '1' ? '人员姓名' : '统一社会信用代码'"
            label-width="120px"
          >
            <u-input
              v-model="formData.identifier"
              :placeholder="
                userType === '1' ? '请输入人员姓名' : '请输入统一社会信用代码'
              "
              border="none"
            />
          </u-form-item>
          <u-form-item
            :label="userType === '1' ? '从业资格证号' : '许可证号'"
            label-width="120px"
          >
            <u-input
              v-model="formData.licenseNumber"
              :placeholder="
                userType === '1' ? '请输入从业资格证号' : '请输入许可证号'
              "
              border="none"
            />
          </u-form-item>
        </template>
      </u-form>
    </view>

    <view class="btn-container">
      <u-button @click="submitQuery" type="primary">立即查询</u-button>
    </view>

    <!-- 证件类型选择器 -->
    <u-picker
      :show="certTypePickerVisible"
      :columns="[certTypeList]"
      @confirm="confirmCertType"
      @cancel="closeCertTypePicker"
    ></u-picker>
  </view>
</template>

<script>
import { changePlatecolor } from "@/common/util_complete.js";

export default {
  data() {
    return {
      tabsData: [
        { name: "从业资格证", id: "1" },
        { name: "经营许可证", id: "2" },
        { name: "道路运输证", id: "3" },
      ],
      formData: {
        carNumber: "",
        companyName: "",
        identifier: "",
        licenseNumber: "",
        plateNumber: "",
        plateColor: "",
        certType: "",
        socialCreditCode: "",
      },
      lineWidth: 60,
      userType: "1",
      list: [],
      certTypePickerVisible: false,
      certTypeList: [
        { text: "请选择", value: "" },
        { text: "网络预约出租汽车运输证", value: "网络预约出租汽车运输证" },
        { text: "道路运输证", value: "道路运输证" },
      ],
      title: "请选择证件类型",
      plateColorPickerVisible: false,
    };
  },
  computed: {
    activeTabStyle() {
      return {
        color: "#2877FF",
        fontSize: "16px",
        fontWeight: "bold",
      };
    },
    inactiveTabStyle() {
      return {
        color: "#0D1444",
        fontSize: "16px",
        fontWeight: "normal",
      };
    },
  },
  onLoad(options) {
    // this.populateList(); // 在加载时填充数据
    this.list = changePlatecolor(this.list);
  },
  methods: {
    onTabClick(event) {
      this.userType = event.id;
      this.formData = {
        companyName: "",
        identifier: "",
        licenseNumber: "",
        plateNumber: "",
        plateColor: "",
        certType: "",
        socialCreditCode: "",
      };
    },
    changeOpenCarColor() {
      this.$refs.carPicker._open();
    },
    //关闭选择器
    closeCarPicker() {
      this.$refs.carPicker._close();
    },
    confirmCarPicker(checkedValue) {
      this.formData.plateColor = checkedValue;
    },

    submitQuery() {
      console.log("查询数据:", this.formData);
    },

    openCertTypePicker() {
      this.certTypePickerVisible = true;
    },

    closeCertTypePicker() {
      this.certTypePickerVisible = false;
    },

    confirmCertType(e) {
      this.formData.certType = JSON.stringify(e.value[0].value).split('"')[1];
      this.closeCertTypePicker();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f3f6fa;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.tabs-header {
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 20rpx;

  ::v-deep .up-tabs-content {
    display: flex;
    justify-content: center;

    .u-tabs__wrapper__nav__item {
      flex: 1;
      text-align: center;
    }
  }
}

.form-content {
  background-color: #fff;
  border-radius: 8rpx;

  ::v-deep .u-form-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 15rpx;

    &:last-child {
      border-bottom: none;
    }

    .u-form-item__body__left {
      width: 120px !important;
    }

    .u-input {
      background-color: transparent;
    }
  }
}

.select-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background-color: #f5f6fc;
  border-radius: 5px;
}
.btn-container {
  margin-top: 40rpx;

  ::v-deep .u-button--primary {
    background-color: #2877ff;
  }
}
.arrow-icon-groud {
  position: relative;
  flex: 1;

  .arrow-icon {
    position: absolute !important;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.custom-input {
  background-color: transparent !important;
}
</style>
